<!-- 数据可视化中心-数据准备-数据源基本信息管理 -->
<template>
  <el-container class="custom__container">
    <el-aside width="340px">
      <div class="custom__aside">
        <div class="custom__aside-header">
          <hsa-title-box title="数据表"></hsa-title-box>
          <el-divider class="custom__aside-divider"></el-divider>
        </div>

        <!-- 列表 -->
        <section class="custom__aside-content">
          <hsa-adaptive-pane>
            <hsa-title-pane fill>
              <hsa-title-pane-item title="" fill>
                <template #title-suffix> 共有{{ "1" }}张数据表 </template>
                <template #toolbar>
                  <el-input
                    style="width: 160px"
                    placeholder="搜索表名"
                    v-model="leftSeachFormData.tableName"
                  >
                    <template #append>
                      <el-button circle :icon="Search" />
                    </template>
                  </el-input>
                </template>
                <hsa-table v-bind="dataTableOption"></hsa-table>
              </hsa-title-pane-item>
            </hsa-title-pane>
          </hsa-adaptive-pane>
        </section>
      </div>
    </el-aside>

    <el-main class="custom__main">
      <hsa-adaptive-container>
        <!-- 数据源管理 -->
        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item>
              <template #title-suffix>
                <span data-v-ab65d6ec="" class="hsa-title-box"
                  ><section class="hsa-title-box__mark"></section>
                  <section>数据表字段</section></span
                >
                <span class="my-search-input">
                  <el-input
                    style="width: 160px"
                    v-model="rightSeachFormData.tableName"
                    placeholder="搜索字段名"
                  >
                    <template #append>
                      <el-button circle :icon="Search" />
                    </template>
                  </el-input>
                </span>
              </template>
              <hsa-table v-bind="tableOption"></hsa-table>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>
      </hsa-adaptive-container>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRoute, useRouter } from 'vue-router'
const router = useRouter();

// 类型
import type { HsaTableColumn } from "hsa-ui";
interface Tree {
  label: string;
  children?: Tree[];
}
const leftSeachFormData = ref({
  tableName: "",
});
const rightSeachFormData = ref({
  tableName: "",
});
// 表格配置
const tableOption = reactive({
  showIndex: true,
  data: ref<any[]>([
    {
      date: "2016-05-02",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-04",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-01",
      name: "王小虎",
      state: "驱动类型",
      city: "192.168.168.222",
      zip: "端口",
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "65535",
    },
  ]),
  columns: ref<HsaTableColumn[]>([
    { align: "center", label: "字段", width: 180, prop: "field" },
    {
      align: "center",
      label: "字段说明",
      minWidth: 200,
      prop: "fieldDescription",
    },
    { align: "center", label: "类型", width: 150, prop: "type" },
    { align: "center", label: "长度", width: 100, prop: "length" },
    { align: "center", label: "是否组件", width: 100, prop: "isComponent" },
    { align: "center", label: "是否必填", width: 100, prop: "isRequired" },
    { align: "center", label: "安全等级", width: 100, prop: "securityLevel" },
    { align: "center", label: "是否共享", width: 100, prop: "isShared" },
  ]),
});

const dataTableOption = reactive({
  showIndex: true,
  data: ref<any[]>([
    { name: "表1", count: "333" },
    { name: "表2", count: "389" },
  ]),
  columns: ref<HsaTableColumn[]>([
    { align: "center", label: "数据表", minWidth: 120, prop: "name" },
    { align: "center", label: "数据量", minWidth: 120, prop: "count" },
  ]),
  paginationEnable: false,
});

// 表格配置
const switchover = ref(false);
</script>

<style lang="scss" scoped>
// 容器
.custom__container {
  height: 100%;
  width: 100%;
  position: relative;
}

// 左侧
.custom__aside {
  background: #fff;
  height: 100%;
  width: 100%;

  // 头部
  .custom__aside-header {
    padding: 10px;
    padding-bottom: 0px;
  }

  // 分割线
  .custom__aside-divider {
    margin-bottom: 5px;
  }

  // 内容
  .custom__aside-content {
    box-sizing: border-box;
    padding: 10px;
    padding-top: 5px;
    height: calc(100% - 94px);
    overflow-y: auto;
  }
}

// 主要内容
.custom__main {
  padding: 0;
  padding-left: 10px;
}
.my-search-input {
  margin-left: 16px;
}
</style>
